<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../../../lib/extjs/ext_2_2_1/resources/css/ext-all.css"/>
		<link rel="stylesheet" type="text/css" href="src/css/Ext.ux.form.ScreenshotField.css"/>
        <!-- Ext dependencies -->
        <script type="text/javascript" src="../../../lib/extjs/ext_2_2_1/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="../../../lib/extjs/ext_2_2_1/ext-all-debug.js">
        </script>
		<script type="text/javascript">
			/*
			 * Make sure this is set correctly before loading Ext.ux.form.ScreenshotField.js
			 */
			Ext.BLANK_IMAGE_URL = '../../../lib/extjs/ext_2_2_1/resources/images/default/s.gif';
		</script>
        <script type="text/javascript" src="src/js/Ext.ux.form.ScreenshotField.js"></script>     
		
		<script type="text/javascript">
            Ext.onReady(function(){				
                Ext.QuickTips.init();				 
				
				new Ext.Viewport({
				    layout: 'border',
				    items: [{
						region: 'north',
						xtype: 'panel',
						layout: 'fit',
						height: 280,
						bodyStyle: 'padding:10px;background-color:#fff;font-family:verdana;font-size:12px;line-height:22px',
						html: "<h2>Ext.ux.form.ScreenshotField 2.0</h2>"
							+ "<p>Ext.ux.form.ScreenshotField (in this release) is a component that now merges functionality from Ext.BrowseButton and Ext.ux.ImageField into a single form field for : <br /><br />"
							+ "<b>1.</b> Uploading screenshots (picture files) in situations where you need a visual preview of the file you just uploaded; e.g passport upload in bio-data forms."
							+ "<br /><b>2.</b> Browsing for and selecting a screenshot from a remote location</p>"
							+ "<br />"
							+ "<b>Author :</b> Charles Opute Odili (chalu)<br />"
							+ "<b>Version :</b> 2.0 <br />"
							+ "<b>Release Date :</b> 10/02/2009<br />"
							+ "<b>License :</b> GPLv3<br />"
					}, {
				        region: 'center',
				        xtype: 'panel',
						layout: 'border',
				        items: [{
							region: 'west',
							width: 200,
							bodyStyle: 'padding:5px 5px 5px 20px',
							xtype: 'panel'						
						}, {
							region: 'center',
							xtype: 'panel',
							frame: true,
							bodyStyle: 'padding:5px',
							items: {
								xtype: 'form',
								id: 'upload-form',							
								url: 'src/php/uploader.php',
								monitorValid: true,
								labelAlign: 'top',
								layout: 'column',
								labelSeparator: '',
								buttonAlign: 'left',
								fileUpload: true,
								items: [{
									columnWidth: .5,
									layout: 'form',
									items: [{
										xtype: 'textfield',
										fieldLabel: 'First Name',
										name: 'fname',
										allowBlank: false
									}, {
										fieldLabel: 'Passport',									
										xtype: 'screenshotfield',
										name: 'passport',
										//readOnly: true,
										//disabled: true,
										width: 75,
										height: 65,
										value: 'src/imgs/placeholder.gif',
										mode: 'remote',
										allowBlank: false,
										valueField: 'url',
										alwaysLoadStore: true,
										browser: {
											store: {
									            url: 'src/php/data.php',
									            root: 'data',
												baseParams: {
													directory: 'images'
												},
									            fields: ['name', 'url', {name:'size', type: 'float'}, {name:'mtime', type:'date', dateFormat:'timestamp'}]
									        },
								            tpl: '<tpl for="."><div class="thumb-wrap" id="{name}"><div class="thumb"><img src="{url}" alt="{shortName}" title="{name}" /></div></div></tpl>',
								            autoHeight: true,
											autoWidth: true,
								            overClass: 'x-view-over',
								            itemSelector: 'div.thumb-wrap',
								            emptyText: 'No images to display',
								            loadingText: 'Loading...',
											singleSelect: true
										},
										browserWidth: 200,
										browserHeight: 150
									}]
								},  {
									columnWidth: .5,
									layout: 'form',
									items: [{
										xtype: 'textfield',
										fieldLabel: 'Last Name',
										name: 'lname',
										allowBlank: false
									}, {
										xtype: 'textfield',
										fieldLabel: 'Email',
										name: 'email',
										vtype: 'email',
										allowBlank: false
									}, {
										fieldLabel: 'Signature',									
										xtype: 'screenshotfield',
										name: 'signature',
										//readOnly: true,
										//disabled: true,
										width: 150,
										height: 45,
										allowBlank: false,
										baseParams: {
											query: 'signature-upload'
										}
									}]									
								}],
								buttons: [{
									text: 'Reset',
									handler: function(){
										Ext.getCmp('upload-form').getForm().reset();
									}
								}, {
									text: 'Submit',
									formBind: true,
									handler: function(){
										var form = Ext.getCmp('upload-form').getForm();
										Ext.Msg.alert('Form Values', form.getValues(true));
									}
								}]
							}								
						}]
				    }]
				});
								
            });
        </script>
        <title>Ext.ux.form.ScreenshotField</title>		
    </head>
    <body>    	
    </body>
</html>